<template>
	<view>
		<canvas class="can" canvas-id="firstCanvas"></canvas>
		<view class="jui_footer jui_flex ">
			<view class="btn" style=";" @tap="change()">
				切换海报
			</view>
			<view class="btn" style="" @tap="save()">
				分享海报
			</view>
		</view>
	</view>
</template>

<script>
	import h5Copy from '@/common/junyi-h5-copy/junyi-h5-copy.js'
	export default {
		data() {
			return {
				u_code: '',
				url: '',
				qrcode: '',
				// bg_url: '/static/imgs/home/invite_bg1.png',
				FromToken: '',
				bgList: [],
				bg_url: '',
				windowWidth:'',
				windowHeight:'',
			};
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
			    success: function (res) {
			        // console.log(res.model);
			        // console.log(res.pixelRatio);
			        console.log(res.screenWidth);
			        console.log(res.screenHeight);
			       that.windowWidth = res.screenWidth
				   that.windowHeight = res.screenHeight
			    }
			});
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					// console.log(res)
					this.u_code = res.data.mobile
				}
			})
		},
		onShow() {
			this.getFromToken();
		},
		methods: {
			//绘制canvas
			toDrawCanvas() {
				let that = this;
				// console.log(that.bg_url,that.url)
				let ctx = uni.createCanvasContext('firstCanvas', this)
				let canvaWidth = that.windowWidth
				let canvaHight = that.windowHeight 
				let imgurl = that.bg_url.i_poster //设置背景图的路径
				ctx.drawImage(imgurl, 0, 0, canvaWidth, canvaHight)
				//绘制二维码位置
				let erweimaimg = that.url
				let towCodeX = (canvaWidth - that.bg_url.i_left)-30
				let towCodeY = (canvaHight-that.bg_url.i_top)+0
				let towCodeW = that.bg_url.i_width-20
				ctx.drawImage(erweimaimg, towCodeX, towCodeY, towCodeW, towCodeW)
				ctx.draw() //结束绘画
			},
			getFromToken() {
				this.$api.getFromToken({
					data: 1
				}).then(res => {
					if (res.code == 1) {
						this.FromToken = res.FromToken;
						this.getInfo()
					}
				});
			},
			change() {
				this.bg_url = this.bgList[++this.num];
				if (this.num == this.bgList.length - 1) {
					this.num = -1
				}
				this.toDrawCanvas()
			},
			getInfo() {
				var that = this;
				let data = {
					uid: uni.getStorageSync('loginInfo').id,
					FromToken: this.FromToken
				}
				this.$api.inviteUserPoster(data).then(res => {
					if (res.code == 1) {
						this.bgList = res.data.invite;
						this.bg_url = res.data.invite[0];
						this.num = 0;
						this.url = res.data.qrcode;
						this.toDrawCanvas()
						console.log(this.bg_url)
					}
				})

			},
			// 复制邀请码
			copyVal() {
				// #ifdef H5
				let content = 'www.cheloniamydaszhineng.com/h5/#/pages/login/register?invite_code=' + this
					.u_code // 复制内容，必须字符串，数字需要转换为字符串
				const result = h5Copy(content)
				if (result === false) {
					this.$msg('复制失败，请重试');
				} else {
					this.$msg('复制成功');
				}
				// #endif
				uni.setClipboardData({
					data: this.url,
					success: () => {
						this.$msg('复制成功');
					},
					fail: () => {
						this.$msg('复制失败，请重试');
					}
				});
			},
			// 保存海报
			saveImg() {
				var that = this;
				var shareImg = that.path;
				// console.log(shareImg)
				uni.downloadFile({
					//下载图片
					url: shareImg,
					success: res => {
						// console.log(res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							//将图片保存在手机
							filePath: res.tempFilePath, //保存的位置
							success: res => {
								that.$msg('保存成功');
							}
						});
					}
				});

			},
			save() {
				let that = this
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: (res) => {
						//返回文件路径
						that.imageUrl = res.tempFilePath
						//保存图片到系统相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '保存成功'
								})
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '保存名片码失败'
								})
							}
						})
						//unii-app分享,我在这里是微信分享好友
						// uni.share({
						// 	provider: "weixin",
						// 	scene: "WXSceneSession",
						// 	type: 2,
						// 	imageUrl: res.tempFilePath,
						// 	success: function(res) {
						// 		console.log(res);
						// 	},
						// 	fail: function(err) {
						// 		console.log("fail:" + JSON.stringify(err));
						// 	}
						// });
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}
	.jui_footer {
		bottom: 20rpx;
		// background-color: ;
		justify-content: space-around;
		background: none !important;
		z-index: 1000;
	}

	.btn {
		width: 40%;
		background-color:$zhuse;
		height: 80rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}

	.bg {
		width: 100%;
		height: 102vh;
		position: relative;
	}

	.con {
		width: 100%;
		height: 93.7vh;
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;

		.codeCon {
			position: absolute;
			// width: 78%;
			// background: #fff;
			border-radius: 10upx;
			// box-shadow: 0 0 10px #b58484;
			text-align: center;

			image {
				width: 240upx;
				height: 240upx;
				margin: 40upx auto 0;
				display: block;
			}

			.code {
				font-size: 44upx;
				color: $zhuse;
				font-weight: 600;
				margin-top: 12upx;
			}

			.txt {
				color: #808080;
			}
		}

		.copyBtn {
			/* #ifdef H5 */
			display: none;
			/* #endif */
		}

		.btn {
			width: 58%;
			height: 70upx;
			line-height: 70upx;
			border-radius: 40upx;
			text-align: center;
			background: $zhuse;
			color: #fff;
			margin: 60upx auto 6upx;
		}
	}
	.can {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		// opacity: 0;
	}
</style>
